<template>
  <div
    class="spin-area"
    :class="{ 'loading-area': withIcon }"
    @click.prevent=""
  >
    <div
      class="loading"
      v-if="withIcon"
      :class="[iconSize == 'small' ? 'small-loading' : 'big-loading']"
    ></div>
    <span v-if="text" class="f-16 c-d2" style="margin-top: 10px;">{{text}}</span>
  </div>
</template>

<script>
export default {
  name: "spin",
  props: {
    withIcon: {
      type: Boolean,
      default: false
    },
    iconSize: {
      type: String,
      default: "small"
    },
    text: {
      type: String,
      default: ''
    }
  }
};
</script>

<style lang="scss" scoped>
.spin-area {
  position: absolute;
  @include size(100%, 100%);
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  background: rgba($color: #ffffff, $alpha: 0.4);
  z-index: 8;
}
.loading-area {
  @include flx(col, c, c);

  .big-loading {
    @include size(80px);
  }
  .small-loading {
    @include size(50px);
  }
  .loading {
    @include bg-setting("Loading", cover, center);
    @keyframes rotation {
      from {
        -webkit-transform: rotate(0deg);
      }
      to {
        -webkit-transform: rotate(360deg);
      }
    }
    transform: rotate(360deg);
    animation: rotation 3s linear infinite;
    -moz-animation: rotation 3s linear infinite;
    -webkit-animation: rotation 3s linear infinite;
    -o-animation: rotation 3s linear infinite;
  }
}
</style>
